<template>
  <div
    class="question_style answered-question"
    :class="[
      question.isChecked
        ? question.studentAnswer
          ? question.isTrue == 1
            ? 'question-true'
            : 'question-false'
          : 'question-noanswer'
        : '',
      question.questionType == 0 ? 'question-type-0' : '',
      question.questionType == 1 ? 'question-type-1' : '',
      question.questionType == 2 ? 'question-type-2' : '',
      question.questionType == 3 ? 'question-type-3' : '',
    ]"
  >
    <div
      v-if="
        question.questionType == 0 ||
        question.questionType == 2 ||
        question.questionType == 3
      "
    >
      <div class="">
        <!-- 听读音 -->
        <div class="question-title" v-if="question.questionType == 0">
          <span v-if="index">{{ index }}.</span>
          <AudioPlay
            @click="playAudio"
            class="ml20 click"
            ref="audioPlay"
            :type="2"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
          <span class="checked-answer">
            <img
              class="checked-answer"
              v-if="question.studentAnswer && question.isTrue == 1"
              src="@/assets/img/icon/true.png"
              alt=""
            />
            <img
              class="checked-answer"
              v-if="question.studentAnswer && question.isTrue == 0"
              src="@/assets/img/icon/false.png"
              alt=""
            />
            <span
              class="no-check checked-answer"
              v-if="!question.studentAnswer"
            >
              （未做）
            </span>
          </span>
        </div>
        <!-- 释义 -->
        <div
          class="baseline light-color"
          :class="question.questionType !== 0 ? 'question-title' : ''"
        >
          <span v-if="question.questionType !== 0 && index">{{ index }}.</span>
          <span class="">
            <span class="paraphrase">
              {{ question.paraphrase }}
            </span>
            <span class="checked-answer" v-if="question.questionType !== 0">
              <img
                class="checked-answer"
                v-if="question.studentAnswer && question.isTrue == 1"
                src="@/assets/img/icon/true.png"
                alt=""
              />
              <img
                class="checked-answer"
                v-if="question.studentAnswer && question.isTrue == 0"
                src="@/assets/img/icon/false.png"
                alt=""
              />
              <span
                class="no-check checked-answer"
                v-if="!question.studentAnswer"
              >
                （未做）
              </span>
            </span>
          </span>
        </div>
        <!--正确句子 -->
        <div class="sentence light-color">
          <span>{{ question.sentence }}</span>
        </div>
        <!-- 回答的句子 -->
        <div class="sentence-answer light-color">
          <span v-if="question.isTrue == 1">
            <span class="true-answer-sentence green-color-text">{{
              question.studentAnswer
            }}</span>
          </span>
          <span v-else>
            <span v-if="question.studentAnswer">
              <!-- ml5 -->
              <span
                class="answered-word-item"
                :class="[
                  item.trueWord == trueSentenceList[index]
                    ? 'true-word green-color-text'
                    : 'false-word red-color-text',
                  item.isPunctuation ? '' : 'ml5',
                ]"
                v-for="(item, index) in falseSentenceList"
                :key="index"
                >{{ item.trueWord }}</span
              >
            </span>
            <span class="false-answer-sentence red-color-text" v-else>空</span>
          </span>
        </div>
      </div>
    </div>
    <div v-if="question.questionType == 1">
      <div class="question-title">
        <span v-if="index">{{ index }}.</span>
        <AudioPlay
          @click="playAudio"
          class="ml20 click"
          ref="audioPlay"
          :type="2"
          :audioSrc="baseURL + question.audioURL"
        ></AudioPlay>
        <span class="checked-answer">
          <img
            class="checked-answer"
            v-if="question.studentAnswer && question.isTrue == 1"
            src="@/assets/img/icon/true.png"
            alt=""
          />
          <img
            class="checked-answer"
            v-if="question.studentAnswer && question.isTrue == 0"
            src="@/assets/img/icon/false.png"
            alt=""
          />
          <span class="no-check checked-answer" v-if="!question.studentAnswer">
            （未选）
          </span>
        </span>
      </div>
      <el-radio-group
        class="question-answer-list"
        v-model="studentAnswer"
        :disabled="true"
      >
        <el-radio
          class="question-radio"
          v-for="(answer, index) in question.answerList"
          :label="answer.paraphrase"
          :key="index"
          :class="[
            question.studentAnswer == answer.paraphrase
              ? 'check-radio-stu'
              : '',
            question.trueAnswer == answer.paraphrase ? 'check-radio-true' : '',
          ]"
        >
          <span class="check-item-label mr5" v-if="isPrint">
            {{ String.fromCharCode(index + 65) }}
          </span>
          <span v-if="answer.word_name">{{ answer.word_name }}</span>
          <span v-else>
            <p>
              {{ answer.paraphrase }}
            </p>
          </span>
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import { setSentenceToWord } from "@/assets/js/sentence2word";
export default {
  data() {
    return {
      typeObj: {
        0: "听音组句",
        1: "听力理解",
        2: "连词成句",
        3: "句子默写",
      },
    };
  },
  computed: {
    trueSentenceList() {
      return this.setWordList(this.question.sentence);
    },
    falseSentenceList() {
      return setSentenceToWord(this.question.studentAnswer).answerList;
    },
  },
  methods: {
    // 切分处理句子
    setWordList(sentence) {
      let result = setSentenceToWord(sentence);
      return result.wordList;
    },
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
  },
  components: {
    AudioPlay,
  },
  props: {
    question: {
      type: Object,
      default: function () {
        return {};
      },
    },

    index: {
      type: Number,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isQuick: {
      type: Boolean,
      default: false,
    },
    isMemory: {
      type: Boolean,
      default: false,
    },
    isPrint: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    question: {
      handler(newData) {
        if (this.studentAnswer != newData.studentAnswer) {
          this.studentAnswer = newData.studentAnswer;
        }
      },
      immediate: true,
    },
  },
};
</script>